<template>
  <lay-container fluid="true" style="padding: 10px; height: calc(100% - 20px)">
    <lay-card height="100%">
      <lay-row space="10">
        <lay-col span="12">
<!--          <lay-form :model="sceneDict" :pane="true">-->
<!--            <lay-row>-->
<!--              <lay-col md="8">-->
<!--                <lay-form-item label="场景名称" prop="scene_name" mode="inline">-->
<!--                  <lay-input v-model="sceneDict.scene_name" class="form_input"></lay-input>-->
<!--                </lay-form-item>-->
<!--              </lay-col>-->
<!--              <lay-col md="4">-->
<!--                <lay-button type="normal" @click="queryScenes">查询</lay-button>-->
<!--                <lay-button type="" @click="">重置</lay-button>-->
<!--              </lay-col>-->
<!--            </lay-row>-->
<!--          </lay-form>-->
        </lay-col>
      </lay-row>
      <lay-row space="10">
        <lay-col md="24">
          <lay-table
            height="350px"
            :columns="columns"
            id="id"
            :dataSource="scenes"
            v-model:selectedKeys="selectedKeys"
            :checkbox="checkbox"
          >
            <template v-slot:toolbar>
              该节点下的场景列表：
            </template>
            <template v-slot:operator="{ data }">
              <lay-button size="xs" type="normal" @click="editRule(data)">编辑</lay-button>
            </template>
          </lay-table>
        </lay-col>
        <lay-col></lay-col>
      </lay-row>
    </lay-card>
  </lay-container>
</template>

<script lang="ts">
export default {
  name: "SceneTable"
}
</script>

<script lang="ts" setup>

import {onBeforeMount, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {querySceneList} from "../../../../api/module/scene";
import router from "../../../../router";
import {notify, openMsg} from "../../../../untils/tip";

const route = useRoute();
const node = ref()

onBeforeMount(() => {
    node.value = route.params;
    queryScenes();
})

const queryScenes = async () =>{
  let {result, status, message} = await querySceneList({id: node.value.scene_id})
  if(status === 'success'){
    scenes.value = result.data_source;
  }else {
    notify(status, message);
  }
}

const selectedKeys = ref(["1"]);
const checkbox = ref(true);
const page = reactive({ current: 1, limit: 10, total: 100 });
const sceneDict = ref({scene_id: '', scene_name: ''});

// 表格数据
const columns = ref([
    {"title": "场景名称", "width": "30%", "key": "scene_name"},
    {"title": "创建人", "width": "10%", "key": "create_user"},
    {"title": "最后修改用户", "width": "10%", "key": "modify_user"},
    {"title": "最后修改时间", "width": "15%", "key": "modify_time"},
    {"title": "路径", "width": "25%", "key": "path"},
    {"title": "操作", "width": "10%", "key": "default_rule", "customSlot": "default_rule", "fixed": "right", "vision": true}
]);
const scenes = ref([]);


const editRule = (data: any) => {
    if(data.scene_id){
      router.push({name: 'EditScene', params: {scene_id: data.scene_id}});
    }else {
      openMsg('failed', '无场景ID，无法跳转到场景编辑页面！')
    }
};

</script>

<style scoped>

</style>